﻿@page "/tree-grid/tree-grid-detail-template"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@*Hidden:Lines*@
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@using ej2_blazor_templatedata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the Tree Grid component with the detail template feature.</p>
</SampleDescription>
<ActionDescription>
    <p>The detail row template provides an additional information about a data row. The template can be provided with the <code>DetailTemplate</code> sub component.</p>
    <p>In this demo, we have presented Employee Information with image in the detail row.</p>
    <p>More information on the Detail template can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/rows/#detail-template'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid Height="400" DataSource="@TreeGridData" IdMapping="EmployeeID" ParentIdMapping="ParentId" TreeColumnIndex="0">
                <TreeGridTemplates>
                    <DetailTemplate>
                        <div style="position: relative; display: inline-block; float: left; font-weight: bold; width: 10%;padding:5px 4px 2px 27px;;">
                            <img src="@UriHelper.ToAbsoluteUri($"images/tree-grid/" + (context as Employee).FullName.ToLower() + ".png")" />
                        </div>
                        <div style="padding-left: 10px; display: inline-block; width: 66%; text-wrap: normal;font-size:13px;font-family:'Segoe UI';">
                            <div class="e-description" style="word-wrap: break-word;">
                                <b>@((context as Employee).Name)</b> was lives at @((context as Employee).Address), @((context as Employee).Country). @((context as Employee).Name) holds a position of <b>@((context as Employee).Designation)</b> in our WA department, (Seattle USA).
                            </div>
                            <div class="e-description" style="word-wrap: break-word;margin-top:5px;">
                                <b style="margin-right:10px;">Contact:</b>@((context as Employee).Contact)
                            </div>
                        </div>
                    </DetailTemplate>
                </TreeGridTemplates>
                <TreeGridColumns>
                    <TreeGridColumn Field="Name" HeaderText="Name" Width="160">
                    </TreeGridColumn>
                    <TreeGridColumn Field="DOB" HeaderText="DOB" Width="120" Type=ColumnType.Date Format="d" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Designation" HeaderText="Designation" Width="180"></TreeGridColumn>
                    <TreeGridColumn Field="EmpID" HeaderText="Employee ID" Width="180" TextAlign="TextAlign.Left"></TreeGridColumn>
                    <TreeGridColumn Field="Country" HeaderText="Country" Width="100"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public IEnumerable<Employee> TreeGridData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeGridData = Employee.GetTemplateData();
    }
}
